<template>
  <div class="nav-header">
    <div class="logo">
      <svg
        class="heart-icon"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
      </svg>
      <span class="logo-text">智慧医疗</span>
    </div>
    
    <!-- 移动端汉堡菜单按钮 -->
    <div class="mobile-menu-btn" @click="toggleMenu">
      <svg :class="{'open': isMenuOpen}" width="24" height="24" viewBox="0 0 24 24">
        <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" />
      </svg>
    </div>
    
    <!-- 移动端导航菜单 -->
    <nav :class="{'mobile-menu-open': isMenuOpen}" class="mobile-nav-menu">
      <ul>
        <li
          v-for="(item, index) in menuList"
          :key="index"
          :class="{ active: isActive(item.path) }"
        >
          <router-link @click="closeMenu" :to="item.path">{{ item.label }}</router-link>
        </li>
        <li class="login-item">
          <router-link @click="closeMenu" to="/Login">登录/注册</router-link>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const isMenuOpen = ref(false);
const menuList = [
  { path: '/yonghu/home', label: '首页' },
  { path: '/yonghu/online-registration', label: '在线挂号' },
  { path: '/yonghu/my-appointments', label: '我的预约' },
  { path: '/yonghu/hospital-info', label: '医院信息' },
  { path: '/yonghu/my', label: '我的信息' }
];

// 检查当前路由是否激活
const isActive = (path) => {
  return router.currentRoute.value.path === path;
};

// 切换菜单显示状态
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
};

// 关闭菜单
const closeMenu = () => {
  isMenuOpen.value = false;
};

// 处理窗口大小变化，小屏幕显示汉堡菜单，大屏幕显示完整导航
onMounted(() => {
  handleResize();
  window.addEventListener('resize', handleResize);
});

const handleResize = () => {
  // 这里可以添加响应式逻辑，例如在大屏幕上显示完整导航
};
</script>

<style scoped>
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 56px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.logo {
  display: flex;
  align-items: center;
}

.heart-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: #165DFF;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: #165DFF;
}

/* 移动端汉堡菜单按钮 */
.mobile-menu-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.mobile-menu-btn svg {
  transition: transform 0.3s ease;
}

.mobile-menu-btn.open svg {
  transform: rotate(45deg);
}

/* 移动端导航菜单 */
.mobile-nav-menu {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 16px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9;
}

.mobile-menu-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mobile-nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-nav-menu li {
  margin: 8px 0;
  width: 100%;
  text-align: center;
}

.mobile-nav-menu li a {
  text-decoration: none;
  color: #333;
  padding: 8px 0;
  display: block;
  font-size: 16px;
}

.mobile-nav-menu li.active a {
  color: #165DFF;
  font-weight: 500;
}

.login-item {
  margin-top: 16px;
  width: 80%;
}

.login-item a {
  text-decoration: none;
  color: #fff;
  background-color: #165DFF;
  padding: 10px 16px;
  border-radius: 4px;
  display: block;
  text-align: center;
  transition: background-color 0.3s ease;
}

.login-item a:hover {
  background-color: #409eff;
}

/* 响应式设计：大屏幕显示完整导航，小屏幕显示汉堡菜单 */
@media (min-width: 768px) {
  .mobile-menu-btn, .mobile-nav-menu {
    display: none;
  }
  
  .nav-menu {
    display: block !important;
  }
}
</style>